<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/dingwei.css">
</head>
<body>
    <h2>相对定位</h2>
    <!-- 相对于自己进行偏移 -->
    <!-- 1.相对定位并没有脱离文档流
    2.相对定位不会改变元素的显示属性 -->

    <div class="yeye box">
        爷爷
        <div class="baba box">
            老爸
            <div class="erzi box">
                这是<span class="span-erzi">儿子</span>哈哈
            </div>
        </div>
    </div>
    <hr>
    <h2>绝对定位</h2>
    <!-- 1.要脱离文档流
    2.绝对定位的元素显示属性会变成block
    3.可以设置宽高 -->
    <div class="yeye1 box">
            爷爷
            <div class="baba1 box">
                老爸
                <div class="erzi1 box">
                    这是<span class="span-erzi1">儿子</span>哈哈
                </div>
            </div>
            <div class="erba">
                二爸
            </div>
        </div>
        <hr>
        <h2>固定定位fixed</h2>
        <!-- 1.也会脱离文档流
        2.绝对定位的元素显示属性会变成block -->
        挤挤<span class="span-fixed">固定定位</span>挤挤
</body>
</html>